<template>
  <!-- 大客户部总监审核 -->
  <div>
    <!-- 搜索 -->
    <commonFilter :defaultProjectStatus="projectStatusReview + ''" :type="'review'" @filterChange="changeHandle" @onCollapse="collapseHandle" />
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :isSelectColumn="isSelectColumn"
      :params="fetchParams"
      :datakey="'records'"
      columnsRef="customerManage_approvalManage_directorReview_index_01"
      :onColumnsChange="columns => (this.columns = columns)"
    ></FilterTable>
    <!-- 侧滑弹窗 -->
    <Drawer
      ref="infoDrawer"
      :visible.sync="visibleDrawer"
      title="审批明细"
      destroyOnClose
      :containerStyle="{ width: '70vw', minWidth: '1000px', height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }"
    >
      <!-- 弹窗本体 -->
      <info-modal v-model="infoId" :infoType="type" :isExamine="isExamine" :examineType="projectStatusReview" @close="infoClose" />
    </Drawer>
  </div>
</template>
<script>
import commonFilter from '../commonFilter/index';
import infoModal from '../approvalDetails/index';
import { dictionary } from '@/utils/dictMixin';
import { region } from '@/api/cms-common/region'; //行政区域

import * as apiType from '@/api/cms-api/customerManage/approvalManage/types';
import { findDirectorReviewPage } from '@/api/cms-api/customerManage/approvalManage';

export default {
  mixins: [dictionary, region],
  components: {
    commonFilter,
    infoModal
  },
  data() {
    return {
      projectStatusReview: apiType.PROJECT_STATUS_MINISTER_REVIEW,
      visibleDrawer: false,
      isSelectColumn: false,
      isExamine: false,
      infoId: '', //记录行id
      type: 'add', //add编辑 ，info详情
      fetchParams: {}, //参数
      columns: this.creatHeader(),
      fetchApi: findDirectorReviewPage //ipa 接口
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    //搜索获取数据
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          render: (props, h) => {
            if (props.row.projectStatus === this.projectStatusReview) {
              return (
                <div>
                  <el-button size="mini" type="text" onClick={() => this.editHandle(props.row)}>
                    审核
                  </el-button>
                  <el-divider direction="vertical" />
                  <el-button size="mini" type="text" onClick={() => this.detailHandle(props.row)}>
                    明细
                  </el-button>
                </div>
              );
            } else {
              return (
                <div>
                  <el-button size="mini" type="text" onClick={() => this.detailHandle(props.row)}>
                    明细
                  </el-button>
                </div>
              );
            }
          }
        },
        {
          title: '项目状态',
          dataIndex: 'projectStatus',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.projectStatus, '2516')}</span>;
          }
        },
        { title: '项目名称', dataIndex: 'projectName', sorter: true },
        { title: '客户公司名称', dataIndex: 'customerName', sorter: true },
        {
          title: '客户类型',
          dataIndex: 'customerType',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.customerType, '2506')}</span>;
          }
        },
        {
          title: '客户性质',
          dataIndex: 'customerProperty',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.customerProperty, '2534')}</span>;
          }
        },
        // { title: '事业部', dataIndex: 'orgName', sorter: true ,width:200},
        {
          title: '事业部',
          dataIndex: 'majorManagerId',
          sorter: true,
          width: 200,
          render: props => {
            return <span>{this.createDictText(props.row.majorManagerId, '2566')}</span>;
          }
        },
        { title: '经销商', dataIndex: 'dealerName', sorter: true },
        {
          title: '所在省',
          dataIndex: 'customerProvince',
          sorter: true,
          render: props => {
            return <span>{this.createRegionText(props.row.customerProvince)}</span>;
          }
        },
        {
          title: '所在市',
          dataIndex: 'customerCity',
          sorter: true,
          render: props => {
            return <span>{this.createRegionText(props.row.customerCity)}</span>;
          }
        },
        {
          title: '所在县/区',
          dataIndex: 'customerDistrict',
          sorter: true,
          render: props => {
            return <span>{this.createRegionText(props.row.customerDistrict)}</span>;
          }
        },
        { title: '详细地址', dataIndex: 'customerAddress', sorter: true },
        {
          title: '客户状态',
          dataIndex: 'customerStatus',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.customerStatus, '2507')}</span>;
          }
        },
        {
          title: '客户来源',
          dataIndex: 'customerSource',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.customerSource, '2508')}</span>;
          }
        },
        {
          title: '所属行业分类',
          dataIndex: 'industryCategory',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.industryCategory, '2510')}</span>;
          }
        },
        {
          title: '行业地位',
          dataIndex: 'industryStatus',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.industryStatus, '2511')}</span>;
          }
        },
        {
          title: '购车用途',
          dataIndex: 'buyPurpose',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.buyPurpose, '2513')}</span>;
          }
        },
        { title: '预计采购日期', dataIndex: 'estimatePurchaseDate', dateFormat: 'YYYY-MM', sorter: true },
        {
          title: '客户采购方式',
          dataIndex: 'purchaseMode',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.purchaseMode, '2512')}</span>;
          }
        },
        {
          title: '预算来源',
          dataIndex: 'budgetSource',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.budgetSource, '2514')}</span>;
          }
        }
      ];
    },
    //编辑
    editHandle(infoRow) {
      //渲染侧滑浮层
      this.visibleDrawer = true;
      //设置审核状态
      this.isExamine = true;
      //传递本列项目ID
      this.infoId = infoRow.projectId;
      //设置为只显示（审核模块不受此影响）
      this.type = 'show';
    },
    //详情
    detailHandle(infoRow) {
      this.visibleDrawer = true;
      this.isExamine = false;
      this.infoId = infoRow.projectId;
      this.type = 'show';
    },
    //关闭浮层的回调
    infoClose(type) {
      this.visibleDrawer = false;
      if (type === 'refresh') {
        // 重新加载表格数据
        this.fetchParams = { ...this.fetchParams };
      }
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    }
  }
};
</script>

<style lang="less" scoped></style>
